let canvas = document.querySelector('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const ctx = canvas.getContext('2d')
ctx.translate(canvas.width / 2, canvas.height)
ctx.scale(1, -1)
let i1 = 0
ctx.fillStyle = 'aqua'
ctx.fillRect(-canvas.width,0,canvas.width*2,canvas.height)
getLine2([0, 0], 30, 200, 90)
function getLine(v0 = [0, 0], thick, length, dir) {
  console.log(i1++);
  if (thick < 10 && Math.random() < 0.3) return
  if (thick <= 2) {
    ctx.beginPath()
    ctx.arc(...v0, 5, 0, 2 * Math.PI)
    ctx.fillStyle = Math.random() < 0.3 ? 'red' : '#fff'
    ctx.fill()
    return
  }
  const v1 = [
    v0[0] + length * Math.cos((dir * Math.PI) / 180),
    v0[1] + length * Math.sin((dir * Math.PI) / 180),
  ]
  ctx.beginPath()
  ctx.moveTo(...v0)
  ctx.lineTo(...v1)
  ctx.strokeStyle = '#333'
  ctx.lineCap = 'round'
  ctx.lineWidth = thick
  ctx.stroke()
  getLine(v1, thick * 0.8, length * 0.8, dir + Math.random
    () * 30)
  getLine(v1, thick * 0.8, length * 0.8, dir - Math.random
    () * 30)

}
function getLine2(v0 = [0, 0], thick, length, dir) {
  console.log(1);
  // console.log(i1++);
  if (thick < 10 && Math.random() < 0.3) return
  if (thick <= 2) {
    ctx.beginPath()
    ctx.arc(...v0, 5, 0, 2 * Math.PI)
    ctx.fillStyle = Math.random() < 0.3 ? 'red' : '#fff'
    ctx.fill()
    return
  }
  const v1 = [
    v0[0] + length * Math.cos((dir * Math.PI) / 180),
    v0[1] + length * Math.sin((dir * Math.PI) / 180),
  ]
  const timer = setInterval(() => {
    console.log(2);
    v0[0] += 0.8
    v0[1] += 0.8
    if (v0[0] >= v1[0]) {
      console.log(3);
      console.log('---------------------');
      clearInterval(timer)
      getLine2(v1, thick * 0.8, length * 0.8, dir + Math.random
        () * 30)
      getLine2(v1, thick * 0.8, length * 0.8, dir - Math.random
        () * 30)
    }
    // if(v0[1] >=v1[1]-10) {
    //   clearInterval(timer)
    //   getLine2(v1,thick*0.8,length*0.8,dir+Math.random
    //     ()*30)
    //     getLine2(v1,thick*0.8,length*0.8,dir-Math.random
    //     ()*30)
    // }
  }, 20)
  ctx.beginPath()
  ctx.moveTo(...v0)
  ctx.lineTo(...v1)
  ctx.strokeStyle = '#3C1D13'
  ctx.lineCap = 'round'
  ctx.lineWidth = thick
  ctx.stroke()
}